<template>
    <div class="platform-page page">
        <img width="100%" src="/images/coach_training_banner.jpg"/>
        <div class="content">
            <PlatformCrumb back="编辑商务合作" style="    margin-top: 0;">
            </PlatformCrumb>
            <el-form :model="addTrain" :rules="rules" ref="addTrain" label-width="0px">
                <div class="content event-detail pl30">
                    <el-form-item prop="name">
                        <div class="matchEdititem">
                            <h2>名称</h2>
                            <el-input type="text" class="w640" v-model="addTrain.name"
                                      placeholder="请输入名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <div class="matchEdititem">
                            <h2>电话</h2>
                            <el-input type="text" class="w640" v-model="addTrain.phone"
                                      placeholder="请输入电话"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="schoolAddress">
                        <div class="matchEdititem">
                            <h2>平台地址</h2>
                            <el-input type="text" class="w640" v-model="addTrain.schoolAddress"
                                      placeholder="请输入平台地址"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="sedan">
                        <div class="matchEdititem">
                            <h2>自驾车路线</h2>
                            <el-input type="text" class="w640" v-model="addTrain.sedan"
                                      placeholder="请输入自驾车路线"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="name">
                        <div class="matchEdititem">
                            <h2>乘车路线</h2>
                            <el-input type="text" class="w640" v-model="addTrain.bus"
                                      placeholder="请输入乘车路线"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="matchEdititem">
                            <h2>邮编</h2>
                            <el-input type="text" class="w640" v-model="addTrain.code"
                                      placeholder="请输入邮编"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="coordinate">
                        <div class="matchEdititem matchEdititem2">
                            <h2>地图坐标</h2>
                            <div style="display: flex;justify-content: flex-start; align-items: center;float: left;width: 100%;">
                                <el-input :disabled="true" style="width: 200px" type="text"
                                          v-model="addTrain.coordinate"
                                          placeholder="请输入地图坐标"></el-input>
                                <el-button @click="amapshow=true">定位</el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="coordinate">
                        <div class="matchEdititem">
                            <h2>座机</h2>
                            <el-input type="text" class="w640" v-model="addTrain.landline"
                                      placeholder="请输入座机"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="leftImgName">
                        <div class="matchEdititem">
                            <h2>左图名称</h2>
                            <el-input type="text" class="w640" v-model="addTrain.leftImgName"
                                      placeholder="请输入左图名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="leftImg">
                        <div class="upload-con display-flex-row">
                            <div class="upload-con-item">
                                <div class="sub-title">左图：</div>
                                <div class="peitu">
                                    <img v-if="addTrain.leftImg" :src="addTrain.leftImg|filtersImg" alt="">
                                    <el-upload
                                            ref='upload'
                                            :action='imgupload'
                                            class="upload-demo"
                                            accept="image/jpeg,image/gif,image/png"
                                            :show-file-list="false"
                                            name="file"
                                            :on-success="handleAvatarSuccessleftImg"
                                            multiple>
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                        <div class="el-upload__text">点击上传</div>
                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="rightImgName">
                        <div class="matchEdititem">
                            <h2>右图名称</h2>
                            <el-input type="text" class="w640" v-model="addTrain.rightImgName"
                                      placeholder="请输入右图名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="rightImg">
                        <div class="upload-con display-flex-row">
                            <div class="upload-con-item">
                                <div class="sub-title">右图：</div>
                                <div class="peitu">
                                    <img v-if="addTrain.rightImg" :src="addTrain.rightImg|filtersImg" alt="">
                                    <el-upload
                                            ref='upload'
                                            :action='imgupload'
                                            class="upload-demo"
                                            accept="image/jpeg,image/gif,image/png"
                                            :show-file-list="false"
                                            name="file"
                                            :on-success="handleAvatarSuccessrightImg"
                                            multiple>
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                        <div class="el-upload__text">点击上传</div>
                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-button class="savebtn2" @click="submitForm('addTrain')">保存</el-button>
                </div>
                <el-dialog
                        title="定位"
                        :visible.sync="amapshow"
                        :before-close="handleClose">
                    <map2 @qure="qure" :center="addTrain.coordinate|fltercoo"></map2>
                </el-dialog>
            </el-form>
        </div>
    </div>
</template>
<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import map2 from "@/components/map2.vue";
    import {getBusinessAffairs, putBusinessAffairs} from '../../api/api/platform.js';
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';
    import E from 'wangeditor'

    export default {
        components: {
            PlatformCrumb,
            map2
        },
        data() {
            return {
                id: this.$route.query.id ? this.$route.query.id : 0,
                data: {
                    id: this.$route.query.id ? this.$route.query.id : 0,
                },
                amapshow: false,
                addTrain: {
                    "bus": "",
                    "code": "",
                    "coordinate": "",
                    "landline": "",
                    "leftImg": "",
                    "leftImgName": "",
                    "name": "",
                    "phone": "",
                    "rightImg": "",
                    "rightImgName": "",
                    "schoolAddress": "",
                    "sedan": ""
                },
                videoupload: videoupload,
                imgupload: imgupload,
                rules: {
                    courseType: [
                        {required: true, message: '请选择课程类型', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入课程名称', trigger: 'blur'},
                    ],
                    doc: [
                        {required: true, message: '请输入正文', trigger: 'blur'},
                    ],
                    money: [
                        {required: true, message: '请输入课程金额', trigger: 'blur'},
                    ],
                    imgs: [
                        {required: true, message: '请上传课程配图', trigger: 'blur'},
                    ],
                    video: [
                        {required: true, message: '请上传视频', trigger: 'blur'},
                    ]
                },
                typelist: [],
                typedata: {
                    "pageNum": 1,
                    "pageSize": 100,
                    "type": "CT"
                },
                videourl: '未选择任何文件',
                center: []
            };
        },
        created() {
            this.getDetail()
            // this.sysDictTypegetTypeList()

        },
        mounted() {
            var that = this;
            var editor = new E('#editorElem')
            editor.customConfig.onchange = (html) => {
                this.addTrain.doc = html
            }
            editor.create()
            if (this.id != 0) {
                courseGet(this.data).then(res => {
                    if (res.code == 200) {
                        that.addTrain.doc = res.data.doc
                        editor.txt.html(this.addTrain.doc)
                    }
                });
            }
        },
        methods: {
            // 定位确认
            qure(e) {
                this.amapshow = false
                this.addTrain.coordinate = JSON.stringify(e)
                console.log(this.addTrain.coordinate);
            },
            // 验证
            submitForm(formName) {
                var that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.editbusinessAffairsEdit()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 编辑
            editbusinessAffairsEdit() {
                putBusinessAffairs(this.addTrain).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                    }
                });
            },
            // 获取详情
            getDetail() {
                var that = this;
                getBusinessAffairs(this.data).then(res => {
                    if (res.code == 200) {
                        that.addTrain = res.data
                    }
                });
            },
            // 左侧
            handleAvatarSuccessleftImg(res, file) {
                console.log(res);
                console.log(file);
                this.addTrain.leftImg = res.data.path
            },
            // 右侧图片
            handleAvatarSuccessrightImg(res, file) {
                console.log(res);
                console.log(file);
                this.addTrain.rightImg = res.data.path
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            fltercoo: function (e) {
                return JSON.parse(e)
            },
        },
    };
</script>
<style>
    .el-upload {
        width: 98px;
        height: 98px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .matchEdititem2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .upload-con .avatar-uploader-icon {
        height: 30px !important;
        width: 30px !important;
        line-height: 30px !important;
    }

    .el-upload-dragger {
        width: 98px !important;
        height: 98px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .upload-video .el-upload {
        width: 100px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, rgba(251, 251, 251, 1), rgba(244, 244, 244, 1), rgba(255, 255, 255, 1));
        border: 1px solid rgba(227, 227, 227, 1);
    }

</style>
<style lang="less" scoped>
    @import url("platform.less");

    @deep: ~">>>";

    .operation {
        margin-right: 25px;
    }

    .upload {
        background: #fff;
        padding: 30px 130px;
    }

    .upload-item {
        margin-bottom: 30px;

        > .title {
            &::before {
                width: 4px;
                height: 18px;
                background-color: #c60818;
                display: inline-block;
                content: " ";
                margin-right: 10px;
                vertical-align: -3px;
            }

            .name {
                font-size: 16px;
            }

            .desc {
                font-size: 12px;
                color: #999;
                margin-left: 15px;
            }
        }
    }

    .upload-con {
        margin-top: 24px;

        @{deep} {
            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

                &:hover {
                    border-color: #409eff;
                }
            }
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
        }

        .avatar {
            width: 98px;
            height: 98px;
            display: block;
        }

        .sub-title {
            margin-bottom: 27px;
        }

        .upload-con-item {
            margin-right: 68px;

            @{deep} {
                .el-button {
                    margin-top: 20px;
                    float: right;
                }
            }
        }

    }
</style>
